<template>
  <!-- 轮播图区域 -->
  <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" indicator-active-color="#0F7CFF"
    indicator-color="#fff" class="swiper">
    <swiper-item>
      <view class="swiper-item" style="background-color: #c00000;">A</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item" style="background-color: goldenrod;">B</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item" style="background-color: deepskyblue;">C</view>
    </swiper-item>
  </swiper>
</template>

<script>
  export default {
    name: "swiper",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .swiper {
    width: 100%;
    height: 354rpx;

    .swiper-item {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 354rpx;
      color: #fff;
      border-radius: 24rpx;
    }
  }
</style>
